import React, {useEffect} from "react";
import {Center, Image, View} from "native-base";
import {FlatList, Platform, StyleSheet, TouchableHighlight} from "react-native";

export const NewContent = ({num, msg, navigation}) => {
    useEffect(()=>{
    },[num])
    return <FlatList
        numColumns='2'
        data={msg.introduce}
        renderItem={({item, index}) =>
            msg.photo[index].trim()!==''?
            <View style={styles.flexView}>
                <View style={styles.vesselss}>
                    <View style={styles.imgContent}>
                        <TouchableHighlight  style={styles.imgVessels} onPress={() => {navigation.navigate('ShowOneImg',{img:msg.photo[index].trim()})}}>
                            <Image style={styles.img} source={{
                                uri: (Platform.OS==='android'||(Platform.Os==="iOS"&&Platform.Version>14))
                                    ?`${msg.photo[index].trim()}?imageView2/0/format/webp/interlace/1/q/1`
                                    :`${msg.photo[index].trim()}`,isStatic: true
                            }} resizeMode="contain" fallbackSource={require('../../assets/error.webp')} alt="123" size="2xl" resizeMethod="resize"
                            />
                        </TouchableHighlight >
                    </View>
                    <Center _text={{fontSize:12}}>{msg.introduce[index]}</Center>
                </View>
            </View>:null
        }
    />
}


const styles=StyleSheet.create({
    vessels:{
        padding:10,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        boxSizing:'border-box',
        flexWrap: 'wrap',
    },
    flexView:{
        width:'48%',
        height:220,
        marginBottom:10,
        backgroundColor:'#fff',
        padding: 10
    },
    vesselss:{
        width:'100%',
        height:'100%'
    },
    imgContent:{
        width:'100%',
        height:150,
        backgroundColor: "#fff",
        borderBottomWidth:2,
        paddingBottom:10,
        borderColor:'#f8f8f8'
    },
    imgVessels:{
        backgroundColor:'#fff',
        borderRadius: 3,
    },
    img:{
        width:'100%',
        height:'100%',
    }
})